<template>
  <div id="temp">
    <mt-header fixed title="制度汇编"></mt-header>
    <!--2.选项卡-->
    <div id="tempTitle">
      <ul class="tabs clearfix">
        <li v-for="(tab,index) in tabsName">
          <span href="#" class="tab-link" @click="tabsSwitch(index)"
                v-bind:class="{active:tab.isActive}">{{tab.name}}</span>
        </li>
      </ul>
    </div>
    <div class="cards">
      <!--第一块内容-->
      <div class="tab-card" style="display: block;">
        <div class="tab-body">
          <yd-infinitescroll :callback="loadActList" ref="pullrefreshDemo">
          <ul class="mui-table-view" slot="list">
            <li class="mui-table-view-cell mui-media gg" v-for="(item, key) in list" :key="key">
              <router-link v-bind="{to:'/boutique/boutiqueinfo/'+item.content}" >
                <div class="mui-media-body">
                  <!--{{item.user_name}}主题-->
                  中国共产党党内监督条例（全文）
                  <div class="ft">
                    <span>{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
                    <img class="pic" src="../../../statics/imgs/images/set_icon.png" alt="">
                  </div>
                </div>
              </router-link>
            </li>
          </ul>
            <!-- 数据全部加载完毕显示 -->
            <!--<span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>-->
            <!--&lt;!&ndash; 加载中提示，不指定，将显示默认加载中图标 &ndash;&gt;-->
            <!--<img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>-->
          </yd-infinitescroll>
        </div>
      </div>
      <!--第二内容-->
      <div class="tab-card  system">
        <div class="tab-body">
          <yd-infinitescroll :callback="loadNewsList" ref="pullrefresh">
            <ul class="mui-table-view" slot="list"><!--list绑定参数是固定-->
              <li class="mui-table-view-cell mui-media gg" v-for="(item, key) in news" :key="key">
                <router-link v-bind="{to:'/boutique/regulatoryFramework/'+item.content}" >
                  <div class="mui-media-body">
                    <!--{{item.pagecount}}-->
                    关于新形势下党内政治生活的若干准则（全文）
                    <div class="ft">
                      <span>{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
                      <img class="pic" src="../../../statics/imgs/images/set_icon.png" alt="">
                    </div>
                  </div>
                </router-link>
              </li>
            </ul>
          </yd-infinitescroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  //     按需导入访问错误
  import {Toast} from 'mint-ui';
  import urlkit from '../../kits/urlkit.js';//测试接口
  import kit from '../../kits/apikit.js';//临时接口

  export default {
    data() {
      return {
        page: 239,//党章党规分页
        newsPage:230,
        list: [],//党章党规
        news:[],//规章制度

        tabsName: [{
          name: "党章党规",
          isActive: true
        }, {
          name: "规章制度",
          isActive: false
        }],
        active: false
      }
    },
    created() {
      this.getActList();//党章党规
      this.getNewsList();//规章制度

    },
    methods: {
      //一.党章党规
      getActList(){
        var that = this;
        let url = 'http://wxtest.centaline.com.cn/api/api?type=getcomments&artid=59f179e5e370ee17f05af22b&pageindex=' + this.page;
        this.$http.get(url).then(function(response)
        {
          that.list = response.body.message;
          that.page++;
        });
      },
      loadActList(){
        var that = this;
        let url = 'http://wxtest.centaline.com.cn/api/api?type=getcomments&artid=59f179e5e370ee17f05af22b&pageindex=' + this.page;
        this.$http.get(url).then(function(response)
        {
          if(response.body.message.length <= 0)
          {
            that.$dialog.toast({
              mes: '已是最新内容',

            });
            /* 所有数据加载完毕 */
            that.$refs.pullrefreshDemo.$emit('ydui.infinitescroll.loadedDone');
            return;
          }
          else {
            for (var i = 0 ; i < response.body.message.length;i++){
              that.list.push(response.body.message[i])
            }
            //更新弹框
            // that.$dialog.toast({
            //   mes:  '为您更新了' + response.body.message.length
            // });
            /* 单次请求数据完毕 */
            that.$refs.pullrefreshDemo.$emit('ydui.infinitescroll.finishLoad');
            that.page++;
          }
        });
      },
      //二.规章制度
      getNewsList(){
        var that = this;
        let url = 'http://wxtest.centaline.com.cn/api/api?type=getcomments&artid=59f179e5e370ee17f05af22b&pageindex=' + this.newsPage;
        this.$http.get(url).then(function(response)
        {
          that.news = response.body.message;
          that.newsPage++;
          console.log(that.news );
        });
      },
      loadNewsList(){
        var that = this;
        let url = 'http://wxtest.centaline.com.cn/api/api?type=getcomments&artid=59f179e5e370ee17f05af22b&pageindex=' + this.newsPage;
        this.$http.get(url).then(function(response)
        {
          if(response.body.message.length <= 0)
          {
            that.$dialog.toast({
              mes: '已是最新内容'
            });
            /* 所有数据加载完毕 */
            that.$refs.pullrefresh.$emit('ydui.infinitescroll.loadedDone');
            return;
          }
          else {
            for (var i = 0 ; i < response.body.message.length;i++){
              that.news.push(response.body.message[i])
            }
            //更新弹框
            // that.$dialog.toast({
            //   mes:  '为您更新了' + response.body.message.length
            // });
            /* 单次请求数据完毕 */
            that.$refs.pullrefresh.$emit('ydui.infinitescroll.finishLoad');
            that.newsPage++;
          }
        });
      },


//选项卡
      tabsSwitch: function (tabIndex) {
        var tabCardCollection = document.querySelectorAll(".tab-card"),
          len = tabCardCollection.length;
        for (var i = 0; i < len; i++) {
          tabCardCollection[i].style.display = "none";
          this.tabsName[i].isActive = false;
        }
        this.tabsName[tabIndex].isActive = true;
        tabCardCollection[tabIndex].style.display = "block";
      }
    }
  }
</script>

<style scoped>
  /*头部样式*/
  .mint-header{
    height: .9rem;
    background-color: #4284D8;
    font-size: .35rem;
  }

/*.system{*/
  /*margin-top: 3.4rem;*/
/*}*/
  /*选项卡样式*/
  #tempTitle {
    position: fixed;
    top: 45px;
    left: 0;
    width: 100%;
    height: .9rem;
    background-color: #fff;
    z-index: 33;
  }

  .tabs li {
    float: left;
    list-style: none;
    width: 50%;
  }

  .tabs .tab-link {
    display: block;
    width: 100%;
    height: 49px;
    text-align: center;
    line-height: 49px;
    color: #808080;
    text-decoration: none;
  }
.mui-media-body{
  font-size: .3rem;
}
  .tabs .tab-link.active {
    border-bottom: .05rem solid #EC542E;
    color: #EC542E;
    transition: .3s;
    font-weight: bold;
  }

  .cards {
    float: left;
    width: 100%;
    margin-top: -1.5rem;
  }

  .cards .tab-card {
    display: none;
  }
  .clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
  }
  /*视频样式*/
  .tab-body .videoList{
    margin-top: -4em;
    background: #fff;
    box-shadow: 0 -0.02rem 0.06rem rgba(0,0,0,.03);
    overflow: hidden;
    padding: .3rem .3rem 0;
    border-bottom: 1px solid #ECECEC;
  }
  .tab-body .videoList li{
    float: left;
    box-sizing: border-box;
    width: 50%;
    height: 4.5rem;
    padding-right: .15rem;
    margin-bottom: .26rem;
    overflow: hidden;
  }
  .tab-body .videoList li img{
    width: 100%;
    height: 3rem;
  }

  /*2.图片大小*/
  .pic{
    float: right;
    width: .3rem;
    height: .3rem;
  }
  .mui-table-view{
    margin-top: 0.9rem;
  }
  .ft{
    margin-top: 1.5em;
    font-size: 10px;
    color:#AEAEAE;
  }
</style>
